<template>
    <div>
        <v-dialog
                v-model="showGameBoxesVisible"
                width="700"
        >
            <v-card>
                <v-card-title class="headline">
                    {{$t('gamebox.list')}}
                </v-card-title>

                <v-card-text>
                    <v-table :dense="true">
                        <template v-slot:default>
                            <thead>
                            <tr>
                                <th class="text-left">{{$t('gamebox.team')}}</th>
                                <th class="text-left">{{$t('gamebox.challenge')}}</th>
                                <th class="text-left">{{$t('gamebox.address')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in allGameBoxes" v-bind:key="index">
                                <td>{{ item.TeamName }}</td>
                                <td>{{ item.ChallengeName }}</td>
                                <td>{{ item.IP }}:{{ item.Port }}</td>
                            </tr>
                            </tbody>
                        </template>
                    </v-table>
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" text @click="showGameBoxesVisible.value = false">
                        {{$t('general.close')}}
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <v-card v-if="info !== null">
            <v-list-item two-line>
                
                    <div>
                        <v-img v-if="info.Logo !== ''" class="logo"
                               :src="`${api.baseURL}/uploads/${info.Logo}`"></v-img>
                        <v-list-item-title class="headline">{{info.Name}}</v-list-item-title>
                        <v-list-item-subtitle>
                            Token {{ info.Token }}
                        </v-list-item-subtitle>
                    </div>
                
            </v-list-item>

            <v-card-text>
                <GameBox/>
            </v-card-text>
            <v-divider/>
            <v-card-actions>
                <v-list-item>
                    #{{ info.Rank }} / {{ api.FormatFloat(info.Score) }} {{$t('general.score')}}
                </v-list-item>
                <v-btn v-if="allGameBoxes !== null" text @click="showGameBoxesVisible = true">靶机列表</v-btn>
            </v-card-actions>
        </v-card>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import GameBox from "./GameBox.vue";
import api from '@/utils/api.js'

const info = ref(null)
let timer = null
const allGameBoxes = ref(null)

const showGameBoxesVisible = ref(false)

onMounted(() => {
            timer = setInterval(getInfo, 5000)
            getInfo()
            getAllGameBoxes()
        })

onUnmounted(() => {
            clearInterval(timer)
        })

function getInfo() {
                api.GET("/team/info").then(res => {
                    info.value = res
                })
            }

function getAllGameBoxes() {
                api.GET("/team/gameboxes/all").then(res => {
                    allGameBoxes.value = res
                }).catch(() => {
                    allGameBoxes.value = null
                })
            }
</script>

<style scoped>
    .logo {
        float: left;
        width: 50px;
        height: 50px;
        margin-right: 5px;
    }
</style>